<template>
    <!-- title部分，开始 -->
    <div class="wrap">
        <img @click="gotoUploadImg" class="avatar" :src="imgSrc" alt="" style="border-radius: 50%">
        <label class="name" @click="loginEventFn">{{userName}}</label>
        <van-icon class="vanIcon" size=".8rem" name="apps-o" @click="gotoAddress"></van-icon>
    </div>
    <!-- title部分，结束 -->

    <!-- 我的订单，开始 -->
    <div class="orderWrap">
        <div class="myOrderWrap">
            <span class="myOrder">我的订单</span>
            <span class="allOrder" @click="gotoAllOrder">全部订单</span>
        </div>
        <div class="orderInfo">
            <van-grid :column-num="5">
                <van-grid-item icon="paid" text="待付款" />
                <van-grid-item icon="send-gift-o" text="待收货" />
                <van-grid-item icon="chat-o" text="待评价" />
                <van-grid-item icon="after-sale" text="退换退款" />
                <van-grid-item icon="revoke" text="回收单" />
            </van-grid>
        </div>
    </div>
    <!-- 我的订单，结束 -->

    <!-- footer底部导航栏 -->
    <footerTabber ref="sonRef" />
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import footerTabber from '@/components/footerTabber'

let userName = ref('登录/注册')

const router = useRouter()
// 用户登录、注册的事件
const loginEventFn = () => {
    // 跳转到登录或注册的页面
    router.push({
        path: '/login'
    })
}

// 页面刚加载时，就读取cookie，并转码，decodeURIComponent
// console.log(document.cookie)
// console.log(decodeURIComponent(document.cookie))

if(document.cookie) {
    let _cookie = decodeURIComponent(document.cookie)

    // 找到第一个=号出现的位置，其实就是查找token=
    let _cookieIndex = _cookie.indexOf('=')
    // console.log(_cookieIndex)
    // console.log(_cookie.substring(_cookieIndex + 1))

    let _subCookieStr = _cookie.substring(_cookieIndex + 1)
    // console.log(_subCookieStr.split(';'))

    // 把截取之后的字符串，转为数组
    let _cookieArr = _subCookieStr.split(';')
    let _cookieObj = {}
    for(let n of _cookieArr) {
        // console.log(n)
        // console.log(n.split('='))

        // 拼接对象的键值对
        _cookieObj[n.split('=')[0]] = n.split('=')[1]
    }
    // console.log(_cookieObj)
    // 读取cookie之后，设置登录之后的用户的用户名
    userName.value = _cookieObj.cn_name + '，欢迎回来！'
}else {
    userName.value = '登录/注册'
}

// 跳转到管理收货地址页面
const gotoAddress = ()=>{
    router.push({
        path:'/addressItem'
    })
}

// 跳转到用户头像上传页面
const gotoUploadImg = () => {
    router.push({
        path: '/uploadImg'
    })
}

// 页面一打开，要读取用户上传的头像地址，如果没有，就加载assets的默认名头像
let _avatarImg = localStorage.getItem('imgsrc')
// console.log(_avatarImg)

let imgSrc = ''
if(_avatarImg) {
    // 这是动态加载图片，require
    // 如果有，就加载用户上传头像
    // 因为 webpack本身是一个预编译的打包工具，无法预测未知变量路径，所以不能require纯变量路径。
    imgSrc = require('../uploadImg/' + _avatarImg)
    // console.log(imgSrc)
}else {
    imgSrc = require('../assets/avatar.png')
}

// 跳转到全部订单页面
const gotoAllOrder = () => {
    router.push({
        path: '/orderCenter'
    })
}
</script>


<style lang="less" scoped>
.wrap {
    overflow: hidden;
    padding: 1rem .5rem;
    .avatar {
        height: 1.2rem;
        width: 1.2rem;
        float: left;
        margin-right: .2rem;
    }
    .name {
        font-size: .46rem;
        float: left;
    }
    .vanIcon {
        float: right;
    }
}

.orderWrap {
    .myOrderWrap{
        margin: 0 .5rem;
        padding: 0 .2rem;
        height: 1.3rem;
        line-height: 1.3rem;
        border-top-left-radius: .4rem;
        border-top-right-radius: .4rem;
        background: rgb(119, 209, 203);
        display: flex;
        justify-content: space-between;
        .myOrder {
            font-size: .5rem;
        }
        .allOrder {
            font-size: .5rem;
        }
    }
    .orderInfo {
        background-color: fff;
        margin: 0 .3rem;
    }
}


</style>
